// Name:                      Close
//
// Description:               Define style close button
//
// Component:                `.am-close`
//
// Modifiers:                `.am-close-alt`
//
// Uses:
//
// Used by:
// ========================================================================


/* ========================================================================
   Component: Close
 ========================================================================== */

.am-close {
  display: inline-block;
  text-align: center;
  width: 24px;
  //height: 24px;
  font-size: 20px;
  font-weight: @close-font-weight;
  line-height: 24px;
  color: @close-color;
  text-shadow: @close-text-shadow;
  .opacity(.2);
  .transition(0.3s);

  &:hover,
  &:focus {
    color: @close-color;
    text-decoration: none;
    cursor: pointer;
    .opacity(.5);
    outline: none;
  }

  // Additional properties for button version
  // iOS requires the button element instead of an anchor tag.
  // If you want the anchor version, it requires `href="#"`.
  button& {
    padding: 0;
    cursor: pointer;
    background: transparent; /* Needed for Sarari */
    border: 0;
    -webkit-appearance: none;
  }

  a&:hover {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .hook-close;
}


/* Modifier
 ========================================================================== */
.am-close-alt {
  border-radius: 50%;
  background: @close-alt-background;
  opacity: 0.7;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.3);
  .hook-close-alt;

  /* Hover */
  &:hover,
  &:focus {
    opacity: 1;
  }
}


.am-close-spin {
  &:hover {
    .rotate(360deg);
  }
}


// Hooks
// =========================================================================
.hook-close() {}
.hook-close-alt() {}

